<template>
  <div id="big_box">
    <!--导航开始-->
    <div id="nav_top">
      <ul>
        <li><a href="###">全网态势</a>
          <ul class="nav_drop-down">
            <li><a href="###">网情态势</a></li>
            <li><a href="###">信息汇总</a></li>
          </ul>
        </li>

        <li><a href="###">事件比对</a>
          <ul class="nv_drop-down">
            <li><a href="###">事件列表</a></li>
            <li><a href="###">我的事件</a></li>
            <li><a href="###">对比历史</a></li>
          </ul>
        </li>
        <li><a href="###">决策支持</a>
          <ul class="nv_drop-down">
            <li><a href="###">首页</a></li>

          </ul>
        </li>
        <li><a href="###">政策研判</a>
          <ul class="nv_drop-down">
            <li><a href="###">报告评测</a></li>

          </ul>
        </li>



      </ul>
    </div>
    <div id="nav_right"style="color: wheat">
      <div class="nav_right_1">
        <iframe width="223" scrolling="no" height="70" frameborder="0" allowtransparency="true" src="//i.tianqi.com/index.php?c=code&id=2&color=%23FFFFFF&bdc=%23&icon=1&num=1&site=12"></iframe>
        <!--<iframe width="280" scrolling="no" height="25" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=34&icon=1&num=3"></iframe>-->
        <!--<iframe allowtransparency="true" frameborder="0" width="195" height="96"  scrolling="no" src="//tianqi.2345.com/plugin/widget/index.htm?s=1&z=1&t=0&v=0&d=1&bd=0&k=&f=&ltf=009944&htf=cc0000&q=1&e=1&a=1&c=54511&w=195&h=96&align=center"></iframe>-->
      </div>
      <div  class="nav_right_r">

        <div class="nav_right_rn">

        </div>
        <div class="nav_right_name">
          <span>admin</span>
        </div>
        <div class="nav_right_ts">
          <div class="nav_right_ts1"></div>

          <div class="sj1" @click="showToggle">
            <a href="http://www.baidu.com">
              <i class="iconfont icon-lingdang1" style="font-size: 2.2vh"></i>
            </a>

          </div>
          <div class="sjg" >
            <span>99</span>
          </div>
        </div>

        <div class="nav_right_zf">
          <div class="nav_right_zf1">

          </div>
          <div class="sj2" @click="showToggle2">
            <a href="http://www.baidu.com">
              <i class="iconfont icon-zhuanfa" style="font-size: 2.2vh"></i>
            </a>
          </div>
        </div>
        <div class="nav_right_tc">
          <div class="nav_right_tc1">

          </div>
          <div class="sj3" @click="showToggle3">
            <a href="http://www.baidu.com">
              <i class="iconfont icon-tuichu2" style="font-size: 2.2vh"></i>
            </a>
          </div>
        </div>


      </div>
    </div>
    <!--导航结束-->


    <!--图形开始-->
    <!--异常指数——仪表盘-->
    <div id="Graphical_1">
      <div class="Graphical_1_1" ref="Graphical_1_1">

      </div>
      <div class="Graphical_1_1_a">
        <p><span style="background-color: #00FFF0"> </span><span>优</span></p>
        <p><span style="background-color: #6DFF96"> </span><span>良</span></p>
        <p><span style="background-color: #FE6B7D"> </span><span>异常</span></p>

      </div>
    </div>
    <!--实时事件-->
    <div id="Graphical_2">
      <div class="demopage1">
        <ul>
          <li>
            <span>1</span>
            <span><i class="iconfont icon-xiangshang" style="color:#FE6B7D;"></i></span>
            <span><a href="###">第六次天津媒体粉丝狂欢节... ...</a></span>
            <span>2018.10.19 10:20</span>
            <span>加入对比</span>
            <span>回溯分析</span>

          </li>
          <li>
            <span>2</span>
            <span><i class="iconfont icon-xiangxia" style="color:#6DFF96;"></i></span>
            <span><a href="###">第六次天津媒体粉丝狂欢节... ...</a></span>
            <span>2018.10.19 10:20</span>
            <span>加入对比</span>
            <span>回溯分析</span>

          </li>
          <li>
            <span>3</span>
            <span><i class="iconfont icon-xiangxia" style="color:#6DFF96;"></i></span>
            <span><a href="###">第六次天津媒体粉丝狂欢节... ...</a></span>
            <span>2018.10.19 10:20</span>
            <span>加入对比</span>
            <span>回溯分析</span>

          </li>
          <li>
            <span>4</span>
            <span><i class="iconfont icon-xiangxia" style="color:#6DFF96;"></i></span>
            <span><a href="###">第六次天津媒体粉丝狂欢节... ...</a></span>
            <span>2018.10.19 10:20</span>
            <span>加入对比</span>
            <span>回溯分析</span>

          </li>
          <li>
            <span>5</span>
            <span><i class="iconfont icon-xiangxia" style="color:#6DFF96;"></i></span>
            <span><a href="###">第六次天津媒体粉丝狂欢节... ...</a></span>
            <span>2018.10.19 10:20</span>
            <span>加入对比</span>
            <span>回溯分析</span>

          </li>
          <li>
            <span>6</span>
            <span><i class="iconfont icon-xiangxia" style="color:#6DFF96;"></i></span>
            <span><a href="###">第六次天津媒体粉丝狂欢节... ...</a></span>
            <span>2018.10.19 10:20</span>
            <span>加入对比</span>
            <span>回溯分析</span>

          </li>
          <li>
            <span>7</span>
            <span><i class="iconfont icon-xiangxia" style="color:#6DFF96;"></i></span>
            <span><a href="###">第六次天津媒体粉丝狂欢节... ...</a></span>
            <span>2018.10.19 10:20</span>
            <span>加入对比</span>
            <span>回溯分析</span>

          </li>
          <li>
            <span>8</span>
            <span><i class="iconfont icon-xiangxia" style="color:#6DFF96;"></i></span>
            <span><a href="###">第六次天津媒体粉丝狂欢节... ...</a></span>
            <span>2018.10.19 10:20</span>
            <span>加入对比</span>
            <span>回溯分析</span>

          </li>
        </ul>
        <span class="gd"><a href="###">更多>></a></span>
      </div>

    </div>
    <!--重点关注实时走势-->
    <div id="Graphical_3">
      <div class="Graphical_3_1" ref="Graphical_3_1">
        <div class="Graphical_3_1_1">

        </div>
      </div>
      <div class="Graphical_3_2">
        <div class="Graphical_3_2_a">
          <div class="a_imgs a_imgs_a"></div>
          <p>
            <span>正面消息:</span>
            <span class="ys_a">20</span>
            <span>条</span>
          </p>
        </div>
        <div class="Graphical_3_2_b">
          <div class="a_imgs a_imgs_b"></div>
          <p>
            <span>负面消息:</span>
            <span class="ys_b">15</span>
            <span>条</span>
          </p>
        </div>
        <div class="Graphical_3_2_c">
          <div class="a_imgs a_imgs_c"></div>
          <p>
            <span>中性消息:</span>
            <span class="ys_c">15</span>
            <span>条</span>
          </p>
        </div>
        <div class="Graphical_3_2_d">
          <div class="a_imgs a_imgs_d"></div>
          <p>
            <span>实时总数:</span>
            <span class="ys_d">180</span>
            <span>条</span>
          </p>
        </div>

      </div>
    </div>
    <!--近一月预警趋势-->
    <div id="Graphical_4">
      <div class="Graphical_4_1" ref="Graphical_4_1">

      </div>
    </div>
    <!--媒体列表-->
    <div id="Graphical_5">
      <div class="Graphical_5_1" ref="Graphical_5_1"></div>
    </div>
    <!--天津热点专题-->
    <div id="Graphical_6">
      <div class="Graphical_6_1" ref="Graphical_6_1"></div>
      <div class="Graphical_6_2"></div>

    </div>
    <!--实时事件分布-->
    <div id="Graphical_7">
      <div class="Graphical_7_1" ref="Graphical_7_1"></div>
      <div class="Graphical_7_2">
        <p><span>相关事件：</span>
          <select>
            <option value="volvo" style="text-align: center">教育</option>
            <option value="saab">养老社保</option>
            <option value="opel">天气</option>
            <option value="audi">娱乐</option>
            <option value="audi">灾情</option>
          </select>
        </p>
      </div>
    </div>
    <!--最新预警事件-----历史预警事件-->
    <div id="Graphical_8" >
      <div class="Graphical_8_1">
        <div><span>0</span></div>
        <div><span>0</span></div>
        <div><span>0</span></div>
        <div><span>0</span></div>
        <div><span>8</span></div>
      </div>
      <div class="Graphical_8_2">
        <div><span>2</span></div>
        <div><span>0</span></div>
        <div><span>1</span></div>
        <div><span>0</span></div>
        <div><span>3</span></div>
      </div>
    </div>
    <!--图形结束-->
  </div>
</template>

<script>

  export default {
    name: "home",
    methods: {
      showToggle:function(){
        $('.nav_right_ts1').css("display","block");
      },
      showToggle2:function(){
        $('.nav_right_zf1').css("display","block");
      },
      showToggle3:function(){
        $('.nav_right_tc1').css("display","block");
      },
      // 图一仪表盘
      drawDynamicGauge(dom) {
         const  option1 = {
          tooltip : {
            formatter: "{a}{b} : {c}%",
            top:1,
            borderColor: '#00FFF0',
            borderWidth: 1,
            backgroundColor: '#042241',
            textStyle: {
              color:'#00FFF0',
            },
          },
          // toolbox: {
          //     feature: {
          //         restore: {},
          //         saveAsImage: {}
          //     }
          // },
          grid: {

            top:'20%',
            // containLabel: true
          },
          series: [
            {
              name: '异常指数',
              type: 'gauge',
              axisLine:{
                lineStyle:{
                  color:[[0.28, '#0FF0FD'], [0.72, '#14FD6C'], [1, '#FE6B7D']],
                },
              },
              title:{
                text: '',
                // offsetCenter:[0,'50%'],
                textStyle:{
                  color:"red",
                  fontSize: 10,
                },
              },

              radius: '98%',
              detail: {formatter:'良'},
              data: [{value: 50, name: ''}]
            }
          ]
        };
        echarts.init(dom).setOption(option1)

      },
      // 图三走势折线图
      drawDynamicLine1(dom) {
        function randomData() {
          now = now + 1;
          value = value + Math.random() * 21 - 10;
          return {
            name: now.toString(),
            value: [
              now,
              Math.random() * 100
            ]
          }
        }

        function randomData2() {
          value = value + Math.random() * 21 - 10;
          return {
            name: now.toString(),
            value: [
              now,
              Math.random() * 100
            ]
          }
        }

        var data1 = [];
        var data2 = [];
        var now = +0;
        var oneDay = 1;
        var value = Math.random() * 1000;
        for (var i = 0; i < 7; i++) {
          data1.push(randomData());
          data2.push(randomData2());
        }

        const option3 = {
          title: {
            // text: '折线图堆叠'
          },
          tooltip : {
            show: true,
            trigger: 'axis',
            borderColor: '#039EA7',
            borderWidth: 1,
            backgroundColor: '#042241',
            textStyle: {
              color:'#00FFF0',
            },
            axisPointer: {
              type: 'cross',
              label: {
                color:'#00FFF0',
                backgroundColor: '#042241',
                borderColor: '#00FFF0',
                borderWidth: 1,
              }
            }
          },
          legend: {
            data:[  {name:'全部',icon:'rect'},
              {name:'正面',icon:'rect'},
              {name:'负面',icon:'rect'},
              {name:'中性',icon:'rect'},

              ],//分别修改legend格式
            textStyle: {
              color: '#FFFFFF',
            }
          },
          grid: {
            top:'16%',
            left: '1%',
            right: '4%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            // type : 'category',
            boundaryGap : true,
            axisLine:{
              lineStyle:{
                color:"#b0afaf",
                width:1,
                type:"solid"
              }
            },  //轴线
            axisLabel:{
              color:"white",
              // rotate:"45"
            }, //刻度角度
            splitLine:{
              // show:true,
              lineStyle:{
                color:['#ccc'],
                width:1,
                type:'solid'
              }
            }, //分割线
          },
          yAxis: {
            type: 'value',
            axisLine:{
              lineStyle:{
                color:"#b0afaf",
                width:1,
                type:"solid"
              }
            },  //轴线
            axisLabel:{
              color:"white",
              // rotate:"45"
            }, //刻度角度
            splitLine:{
              show:true,
              lineStyle:{
                color:['#6A7D94'],
                width:1,
                type:'solid'
              }
            }, //分割线
          },
          series: [{
            name: '全部',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            areaStyle: {
              // normal: {}
              color: '#00FFF0',

            },
            itemStyle : {
              normal : {
                color:'#00FFF0'
              },
              lineStyle: {
                color:'#00FFF0',
              }
            },
            data: data1
          },
            {
              name: '正面',
              type: 'line',
              showSymbol: false,
              hoverAnimation: false,
              itemStyle : {
                normal : {
                  color:'#00FFF0'
                },
                lineStyle: {
                  color:'#00FFF0',
                }
              },
              data: data2
            },
            {
              name: '负面',
              type: 'line',
              showSymbol: false,
              hoverAnimation: false,
              itemStyle : {
                normal : {
                  color:'#00FFF0'
                },
                lineStyle: {
                  color:'#00FFF0',
                }
              },
              data: data2
            },
            {
              name: '中性',
              type: 'line',
              showSymbol: false,
              hoverAnimation: false,
              itemStyle : {
                normal : {
                  color:'#00FFF0'
                },
                lineStyle: {
                  color:'#00FFF0',
                }
              },
              data: data2
            }
          ]
        };

        setInterval(function () {

          for (var i = 0; i < 1; i++) {
            data1.shift();
            data1.push(randomData());
            data2.shift();
            data2.push(randomData2());
          }

          myChart.setOption({
            series: [{
              name: '全部',
              type: 'line',
              showSymbol: false,
              hoverAnimation: false,
              data: data1
            },
              {
                name: '正面',
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: data2
              },
              {
                name: '负面',
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: data2
              },
              {
                name: '中性',
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: data2
              }
              ]
          });
          myChart.setOption({
            xAxis: [{
              type: 'value',
              splitLine: {
                show: false
              },
              min: +data1[0].name,
              max: +20
            }]
          });

        }, 2000);
        // const option3 = {
        //   title: {
        //     // text: '堆叠区域图'
        //   },
        //   tooltip : {
        //     show: true,
        //     trigger: 'axis',
        //     borderColor: '#00FFF0',
        //     borderWidth: 1,
        //     backgroundColor: '#042241',
        //     textStyle: {
        //       color:'#00FFF0',
        //     },
        //     axisPointer: {
        //       type: 'cross',
        //       label: {
        //         color:'#00FFF0',
        //         backgroundColor: '#042241',
        //         borderColor: '#00FFF0',
        //         borderWidth: 1,
        //       }
        //     }
        //   },
        //   legend: {
        //     // data:['全部','正面','负面','中性'],
        //     data:[  {name:'全部',icon:'rect'},
        //       {name:'正面',icon:'rect'},
        //       {name:'负面',icon:'rect'},
        //       {name:'中性',icon:'rect'}],//分别修改legend格式
        //     textStyle: {
        //       color: '#FFFFFF',
        //     }
        //   },
        //   // toolbox: {
        //   //     feature: {
        //   //         saveAsImage: {}
        //   //     }
        //   // },
        //   grid: {
        //     top:'12%',
        //     left: '3%',
        //     right: '4%',
        //     bottom: '10%',
        //     containLabel: true
        //   },
        //   xAxis : [
        //     {
        //       type : 'category',
        //       boundaryGap : true,
        //       axisLine:{
        //         lineStyle:{
        //           color:"#b0afaf",
        //           width:1,
        //           type:"solid"
        //         }
        //       },  //轴线
        //       axisLabel:{
        //         color:"white",
        //         // rotate:"45"
        //       }, //刻度角度
        //       splitLine:{
        //         // show:true,
        //         lineStyle:{
        //           color:['#ccc'],
        //           width:1,
        //           type:'solid'
        //         }
        //       }, //分割线
        //       data: ['0:00', '0:30', '1:00', '1:30', '2:00', '2:30', '3:00','3:30','4:00','4:30','5:00','5:30','6:00','6:30','7:00','7:30','8:00','8:30','9:00','9:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00']
        //       // data: ['0:00', '0:30', '1:00', '1:30', '2:00', '2:30', '3:00','3:30','4:00','4:30','5:00','5:30','6:00','6:30','7:00','7:30','8:00','8:30','9:00','9:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30']
        //
        //     }
        //   ],
        //   yAxis : [
        //     {
        //       type : 'value',
        //       axisLine:{
        //         lineStyle:{
        //           color:"#b0afaf",
        //           width:1,
        //           type:"solid"
        //         }
        //       },  //轴线
        //       axisLabel:{
        //         color:"white",
        //         // rotate:"45"
        //       }, //刻度角度
        //       splitLine:{
        //         show:true,
        //         lineStyle:{
        //           color:['#6A7D94'],
        //           width:1,
        //           type:'solid'
        //         }
        //       }, //分割线
        //     }
        //   ],
        //   series : [
        //     {
        //       name:'全部',
        //       type:'line',
        //       stack: '总量',
        //       areaStyle: {
        //         // normal: {}
        //         color: '#00FFF0',
        //
        //       },
        //       itemStyle : {
        //         normal : {
        //           color:'#00FFF0'
        //         },
        //         lineStyle: {
        //           color:'#00FFF0',
        //         }
        //       },
        //       data:[120, 132, 101, 134, 90, 230, 210,230,211,400,200,101,120,160,156,140,182,130,160,99,200,240,210,130,240,156,176,204,301,222,132,102,230,230,210,302,111]
        //     },
        //     {
        //       name:'负面',
        //       type:'line',
        //       stack: '总量',
        //       // areaStyle: {normal: {}},
        //       itemStyle : {
        //         normal : {
        //           color:'#00FFF0'
        //         },
        //         lineStyle: {
        //           color:'#00FFF0',
        //         }
        //       },
        //
        //       data:[200, 156, 101, 134, 90, 230, 210,230,211,400,200,101,120,160,156,500,182,201,160,99,200,300,210,130,240,156,210,204,220,222,132,203,230,230,270,302,33]
        //     },
        //     {
        //       name:'正面',
        //       type:'line',
        //       stack: '总量',
        //       // areaStyle: {normal: {}},
        //       itemStyle : {
        //         normal : {
        //           color:'#00FFF0'
        //         },
        //         lineStyle: {
        //           color:'#00FFF0',
        //         }
        //       },
        //       data:[120, 132, 101, 134, 90, 230, 210,230,211,400,200,101,120,160,156,140,182,130,160,99,200,240,210,130,240,156,176,204,301,222,132,102,230,230,210,302,111]
        //     },
        //     {
        //       name:'中性',
        //       type:'line',
        //       stack: '总量',
        //       itemStyle : {
        //         normal : {
        //           color:'#00FFF0'
        //         },
        //         lineStyle: {
        //           color:'#00FFF0',
        //         }
        //       },
        //       // areaStyle: {normal: {}},
        //       data:[120, 132, 101, 134, 90, 230, 210,230,211,400,200,101,120,160,156,140,182,130,160,99,200,240,210,130,240,156,176,777,301,111,132,320,230,100,210,302,111]
        //     }
        //
        //   ]
        // };
        echarts.init(dom).setOption(option3)

      },
      // 图四预警趋势折线图
      drawDynamicLine2(dom) {
        const option4={
          color: ['#00FFF0'],
          title: {
            textStyle: {
              color:"#FFFFFF",
              fontSize: 16,
            },
            left:'center'

          },
          tooltip : {
            trigger: 'axis',
            borderColor: '#00FFF0',
            borderWidth: 1,
            backgroundColor: '#042241',
            textStyle: {
              color:'#00FFF0',
            },
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#042241',
                borderColor: '#00FFF0',
                borderWidth: 1,
                color:'#00FFF0',
              }
            }
          },
          legend: {
            show: false,
            // data:['上月预警趋势','本月预警趋势'],
            // bottom:"1%",
            // textStyle: {
            //     color: '#FFFFFF',
            // }
          },
          toolbox: {
            feature: {
              // saveAsImage: {},
              magicType:{
                show:true,
                type:'line',
              }
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '13%',
            top:'17%',
            containLabel: true
          },
          xAxis : [
            {
              type : 'category',
              boundaryGap : true,
              axisLine:{
                lineStyle:{
                  color:"#b0afaf",
                  width:1,
                  type:"solid"
                }
              },  //轴线
              axisLabel:{
                color:"热点",
                // rotate:"45"
              }, //刻度角度
              splitLine:{
                // show:true,
                lineStyle:{
                  color:['#00FFF0'],
                  width:1,
                  type:'solid'
                }
              }, //分割线
              data: ['2018/6/23', '2018/6/24', '2018/6/25', '2018/6/26', '2018/6/27', '2018/6/28', '2018/6/29','2018/6/30','2018/7/01','2018/7/02','2018/7/03','2018/7/04','2018/7/05','2018/7/06','2018/7/07','2018/7/08','2018/7/09','2018/7/10','2018/7/11','2018/7/12','2018/7/13','2018/7/14','2018/7/15','2018/7/16','2018/7/17','2018/7/18']



            }




          ],
          yAxis : [
            {
              type : 'value',
              axisLine:{
                lineStyle:{
                  color:"#b0afaf",
                  width:1,
                  type:"solid"
                }
              },  //轴线
              axisLabel:{
                color:"white",
                // rotate:"45"
              }, //刻度角度
              splitLine:{
                show:true,
                lineStyle:{
                  color:['#6A7D94'],
                  width:1,
                  type:'solid'
                }
              }, //分割线
            }

          ],
          series : [
            {
              name:'本月预警趋势',
              type:'line',
              data:[60,70,88,90,120,130,131,134,139,140,142,147,150,155,160,165,170,175,176,180,182,182,185,190,192]
            }

          ]
        };
        echarts.init(dom).setOption(option4)

      },
      // 图五媒体列表
      drawDynamicScatter1(dom) {
        var hours = ['0', '450', '500', '1000', '1500', '2000', '2500','3000','4000','4500'];
        var days = ['网络', '论坛', '微博',
          '微信', '博客', '报刊', 'APP新闻'];

        // var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],
        //             [0,1,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,1],[3,11,1],[3,12,1],[3,13,1],[3,14,1],[3,15,6],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];
        var data = [[0,0,3],[0,1,3],[0,2,10],[0,3,3],[0,4,10],[0,5,8],[0,6,8],[0,7,4],[0,8,4],[0,9,4],[0,10,4],
          [1,0,10],[1,1,4],[1,2,6],[1,3,4],[1,4,10],[1,5,3],[1,6,3],[1,7,2],[1,8,2],[1,9,2],[1,10,2],
          [2,0,3],[2,1,12],[2,2,6],[2,3,4],[2,4,2],[2,5,3],[2,6,3],[2,7,0],[2,8,0],[2,9,0],[2,10,0],
          [3,0,2],[3,1,4],[3,2,6],[3,3,10],[3,4,4],[3,5,6],[3,6,6],[3,7,1],[3,8,1],[3,9,1],[3,10,1],
          [4,0,3],[4,1,9],[4,2,8],[4,3,5],[4,4,3],[4,5,3],[4,6,2],[4,7,3],[4,8,3],[4,9,3],[4,10,3],
          [5,0,4],[5,1,0],[5,2,6],[5,3,1],[5,4,3],[5,5,10],[5,6,3],[5,7,8],[5,8,8],[5,9,8],[5,10,8],
          [6,0,9],[6,1,3],[6,2,4],[6,3,4],[6,4,6],[6,5,11],[6,6,7],[6,7,2],[6,8,2],[6,9,2],[6,10,2]
        ];

        const option5 = {

          tooltip: {
            position: 'top',
            borderColor: '#00FFF0',
            borderWidth: 1,
            backgroundColor: '#042241',
            textStyle: {
              color:'#00FFF0',
            },
          },
          title: [],
          singleAxis: [],
          series: [],
        };

        echarts.util.each(days, function (day, idx) {
          option5.title.push({
            textBaseline: 'middle',
            top: (idx + 0.5) * 100 / 7 + '%',
            left: '2%',
            text: day,
            textStyle: {
              color: '#ffffff',
              fontSize: 13,
            },
          });
          option5.singleAxis.push({
            left: 90,
            type: 'category',
            boundaryGap: false,
            data: hours,
            top: (idx * 100 / 7 + 3) + '%',
            height: (100 / 7 - 10) + '%',
            axisLabel: {
              interval: 1,
              color: '#FFFFFF',
              fontSize: 12,


            },
            axisLine:{
              lineStyle: {
                color: '#6A7D94',
              }
            },



          });
          option5.series.push({
            singleAxisIndex: idx,
            coordinateSystem: 'singleAxis',
            type: 'scatter',
            data: [],

            symbolSize: function (dataItem) {
              return dataItem[1] * 3;
            }
          });
        });
        echarts.util.each(data, function (dataItem) {
          option5.series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
        });
        echarts.init(dom).setOption(option5)

      },
      // 图六天津热点专题
      drawDynamicScatter2(dom) {
        var plantCap = [{
          name: '王俊凯',
          value: 'NO.01'
        }, {
          name: '中国经济',
          value: 'NO.6'
        }, {
          name: '中国环境',
          value: 'NO.3'
        }, {
          name: '重大事项安排',
          value: 'NO.4'
        }, {
          name: '中国经济',
          value: 'NO.10'
        }, {
          name: '中国经济',
          value: 'NO.7'
        }, {
          name: '人名日报 ',
          value: 'NO.02'
        }, {
          name: '中国经济',
          value: 'NO.7'
        }];

        var datalist = [{
          offset: [56, 43],
          symbolSize: 70,
          opacity: .95,
          color: '#ea5655'
        }, {
          offset: [35, 80],
          symbolSize: 50,
          opacity: .88,
          color: '#7aabe2'
        }, {
          offset: [20, 43],
          symbolSize: 63,
          opacity: .84,
          color: '#ff7123'
        }, {
          offset: [83, 30],
          symbolSize: 61,
          opacity: .8,
          color: '#ffc400'
        }, {
          offset: [36, 20],
          symbolSize: 50,
          opacity: .75,
          color: '#5e333f'
        }, {
          offset: [64, 10],
          symbolSize: 50,
          opacity: .7,
          color: '#6b3442'
        }, {
          offset: [56, 85],
          symbolSize: 63,
          opacity: .68,
          color: '#8a3647'
        }, {
          offset: [75, 80],
          symbolSize: 50,
          opacity: .6,
          color: '#68333f'
        }];
        var datas = [];
        for (var i = 0; i < plantCap.length; i++) {
          var item = plantCap[i];
          var itemToStyle = datalist[i];
          datas.push({
            name: item.value + '\n' + item.name,
            value: itemToStyle.offset,
            symbolSize: itemToStyle.symbolSize,
            label: {

              normal: {
                textStyle: {
                  fontSize: 9,
                  color: '#FFFFFF',
                }
              }
            },
            itemStyle: {
              normal: {
                color: itemToStyle.color,
                opacity: itemToStyle.opacity
              }
            },
          })
        }
        const option6 = {
          grid: {
            show: false,
            top: 10,
            bottom: 10
          },
          xAxis: [{
            gridIndex: 0,
            type: 'value',
            show: false,
            min: 0,
            max: 100,
            nameLocation: 'middle',
            nameGap: 5
          }],
          yAxis: [{
            gridIndex: 0,
            min: 0,
            show: false,
            max: 100,
            nameLocation: 'middle',
            nameGap: 30
          }],
          series: [{
            type: 'scatter',
            symbol: 'circle',
            symbolSize: 120,
            label: {
              normal: {
                show: true,
                formatter: '{b}',
                color: '#fff',
                textStyle: {
                  fontSize: '20'
                }
              },
            },
            itemStyle: {
              normal: {
                color: '#00acea'
              }
            },
            data: datas
          }]
        };
        echarts.init(dom).setOption(option6)

      },
      // 图七天津地图
      drawDynamicMap(dom) {
        const option7= {
          title: {
            // text: 'iphone销量',
            // subtext: '纯属虚构',
            // left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            // orient: 'vertical',
            // left: 'left',
            // data:['投诉数量'],
            // textStyle: {
            //     color: '#FFFFFF',
            // },

          },
          visualMap: {
            min: 0,
            max: 300,

            type: 'continuous',
            splitNumber:5,
            left: 'left',
            bottom:'10%',
            showLabel:"true",
            maxOpen:"true",
            color:["#1D7BD1","#009EE4","#8ADA57","#FBBB37","#99CCCC"],
            text: ['高','低'],
            precision:2,
            calculable: true,
            orient: 'horizontal',
            textStyle: {
              color:'white'
            }
          },
          // toolbox: {
          //     show: true,
          //     orient: 'vertical',
          //     left: 'right',
          //     top: '0',
          //     feature: {
          //         dataView: {readOnly: false},
          //         restore: {},
          //         saveAsImage: {}
          //     }
          // },
          series: [
            {
              // name: '事件数量：',
              type: 'map',
              mapType: '天津',
              roam: true,
              coordinateSystem: 'geo',
              label: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: true
                }
              },
              itemStyle: {
                normal: {//未选中状态
                  borderWidth:3,//边框大小
                  borderColor:'#1F84AB',
                  areaColor: '#126B92',//背景颜色
                  color:'#66FFFF',

                  label: {
                    show: true,//显示名称
                    color:'#CCFFFF',
                  }
                },
                emphasis: {// 也是选中样式
                  // borderWidth:2,
                  // borderColor:'#fff',
                  areaColor: '#CCFFFF',
                  label: {
                    show: true,
                    textStyle: {
                      color: '#fff'
                    }
                  }
                }
              },
              data:[
                {name:"和平区",value:10},
                {name:"河东区",value:20},
                {name:"河西区",value:15},
                {name:"南开区",value:16},
                {name:"河北区",value:30},
                {name:"红桥区",value:60},
                {name:"东丽区",value:45},
                {name:"西青区",value:8},
                {name:"津南区",value:30},
                {name:"北辰区",value:11},
                {name:"武清区",value:23},
                {name:"宝坻区",value:33},
                {name:"滨海新区",value:41},
                {name:"宁河区",value:5},
                {name:"静海区",value:18},
                {name:"蓟州区",value:20}
              ]

            },

          ]
        };
        echarts.init(dom).setOption(option7)

      },
    },
    mounted() {
      this.drawDynamicGauge(this.$refs.Graphical_1_1);
      this.drawDynamicLine1(this.$refs.Graphical_3_1);
      this.drawDynamicLine2(this.$refs.Graphical_4_1);
      this.drawDynamicScatter1(this.$refs.Graphical_5_1);
      this.drawDynamicScatter2(this.$refs.Graphical_6_1);
      this.drawDynamicMap(this.$refs.Graphical_7_1);
    }
  };
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
  }
  #big_box{
    width: 100%;
    height: 100%;
    position: absolute;
    background-image:url("../imgs/bj1.jpg"  );
    background-size:100% 100%;
  }
  /*导航开始*/
  /*---top*/
  #nav_top{
    width: 37%;
    height: 4.5%;
    /*border: 1px solid red;*/
    margin: 0.5% auto;
  }

  #nav_top>ul>li{
    float: left;
    text-align: center;
    position: relative;
    width: 20%;
    margin-left: 3.2%;
    color: white;
    font-size: 16px;
    font-weight: bolder;
    transform: skewX(-45deg);
    box-shadow: inset 0 0 40px #1b7fab;
    border: 1px solid transparent;

  }

  #nav_top>ul>li>a{
    text-decoration: none;
    color: white;
    line-height: 44px;
    padding: 0% 10%;
    display:inline-block;
    transform: skew(45deg);
    text-shadow:0px 0px 40px #0FF0FD;
  }
  #nav_top>ul>li:hover {
    box-shadow: inset 0 0 50px #28F8FF;

  }

  #nav_top>ul>li>ul{
    display: none;
    width: 101.5%;
    height: 80%;
    /*border: 1px solid #000;*/
    position: absolute;
    left: 13%;
    top: 102%;
    transform: skewX(45deg);

  }
  #nav_top>ul>li>ul>li{
    margin-top: -1.5%;
    border: 1px solid transparent;
    box-shadow: inset 0 0 40px #1b7fab;
    z-index: 999;
  }
  #nav_top>ul>li>ul>li:hover{
    box-shadow: inset 0 0 50px #28F8FF;
  }
  #nav_top>ul>li>ul>li a{
    color: white;
    line-height: 200%;
  }
  #nav_top ul :hover ul{
    display: block;
  }
  /*---top*/
  /*--right*/
  #nav_right{
    width: 26%;
    height: 7%;
    position: absolute;
    border: 1px solid transparent;
    right: 1%;
    top: 0;
  }
  .nav_right_1{
    width: 54%;
    /*height: 100%;*/
    position: absolute;
    top: -7%;
    border: 1px solid transparent;
    /*left: -6%;*/
    /*z-index: 999;*/
  }
  .nav_right_r{
    width: 56%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 47%;
    border: 1px solid transparent;
  }



  .nav_right_rn{
    position: absolute;
    top: 16%;
    text-align: center;
    width: 15%;
    height: 59%;
    border: 1px solid transparent;
    border-radius: 50%;
    background-image:url("../imgs/rn.png"  );
    background-size:100% 100%;
  }
  .nav_right_name{
    position: absolute;
    top: 16%;
    text-align: center;
    width: 17%;
    height: 59%;
    left: 20%;
    line-height: 330%;
    border: 1px solid transparent;

  }
  .nav_right_name span{
    color: white;
  }
  .nav_right_ts1,.nav_right_zf1,.nav_right_tc1{
    width: 12.5%;
    height: 50.5%;
    top: 22.5%;
    border: 1px solid #000;
    position: absolute;
    border-radius: 50%;
    background-color: black;
    opacity: 0.6;
    display: none;
  }
  .nav_right_ts1{
    left: 41%;

  }
  .nav_right_zf1{
    left: 59%;
  }
  .nav_right_tc1{
    left: 77%;
  }
  .nav_right_ts div:nth-child(2),.nav_right_zf div:nth-child(2){
    width: 12.5%;
    height: 50.5%;
    top: 22.5%;
    border: 1px solid transparent;
    position: absolute;
    text-align: center;
    line-height:223%;
    cursor:pointer;

  }
  .nav_right_tc div:nth-child(2){
    width: 12.5%;
    height: 50.5%;
    top: 22.5%;
    border: 1px solid transparent;
    position: absolute;
    line-height:223%;
    cursor:pointer

  }
  .nav_right_tc div:nth-child(2) i{
    margin-left: 28%;
  }
  .nav_right_ts div:nth-child(2){
    left: 41%;
  }
  .nav_right_zf div:nth-child(2){
    left: 59%;
  }
  .nav_right_tc div:nth-child(2){
    left: 77%;
  }
  .iconfont{
    color: white;


  }
  .sjg{
    width: 5.5%;
    height: 24%;
    position: absolute;
    /*border: 1px solid #000;*/
    top: 20%;
    left: 47%;
    padding: 1%;
    border-radius: 48%;
    background-color: #F6132A;
    font-size: 1vh;
    font-weight: bolder;
    cursor:pointer;

  }
  /*--right*/
  /*导航结束*/
  /*————————————————图形一————————————————————*/
  #Graphical_1{
    width: 27.6%;
    height: 21.2%;
    border: 1px solid transparent;
    position: absolute;
    top: 11.7%;
    left: 0.7%;
  }
  .Graphical_1_1{
    width: 100%;
    height: 100%;
    position: absolute;
    border: 1px solid transparent;
  }
  .Graphical_1_1_a{
    width: 16%;
    height: 50%;
    border: 1px solid transparent;
    position: absolute;
    left: 5%;
    top: 0;
  }
  .Graphical_1_1_a p{
    margin-top: 5%;
  }
  .Graphical_1_1_a p span:nth-child(1) {
    width: 37%;
    height: 15%;
    position: absolute;
    left: 0;
    border: 1px solid transparent;
    border-radius: 18%;
  }
  .Graphical_1_1_a p span:nth-child(2){
    margin-left: 55%;
    color: white;
    /*font-weight: bolder;*/
  }

  /*——————————————————图形二——————————————————*/
  #Graphical_2{
    width: 27.6%;
    height: 34.1%;
    border: 1px solid transparent;
    position: absolute;
    top: 37.6%;
    left: 0.7%;
  }
  .demopage1{
    width: 99.5%;
    height: 80%;
    margin-top: 5%;
    border: 1px solid transparent;
    font: 12px/180% Arial, Helvetica, sans-serif;
  }
  /*.demopage1 ul li:nth-child(1),.demopage1 ul li:nth-child(2),.demopage1 ul li:nth-child(3){*/
  /*background-color: black;*/
  /*opacity: 0.6;*/
  /*}*/
  .demopage1 ul li{
    height: 2.5vh;
    text-align: center;
    margin-top: 1.2%;
  }
  .demopage1 ul li span{
    margin-left: 1.4%;
  }
  .demopage1 ul li span:nth-child(1){
    width: 3%;
    display: inline-block;
    border: 1px solid transparent;
    color: white;
    /*background-color: #F9B709;*/
    font-weight: bolder;
    font-size: 1vh;
  }
  .demopage1 ul li:nth-child(1) span:nth-child(1),.demopage1 ul li:nth-child(2) span:nth-child(1),.demopage1 ul li:nth-child(3) span:nth-child(1){
    background-color: #F9B709;
  }
  .demopage1 ul li:nth-child(4) span:nth-child(1),.demopage1 ul li:nth-child(5) span:nth-child(1),.demopage1 ul li:nth-child(6) span:nth-child(1),.demopage1 ul li:nth-child(7) span:nth-child(1),.demopage1 ul li:nth-child(8) span:nth-child(1){
    background-color:#51647A;
  }
  .demopage1 ul li span:nth-child(2){
    width: 3%;
    /*height: 10%;*/
    display: inline-block;
    border: 1px solid transparent;
    color: white;
    /*background-color: #F9B709;*/
    font-weight: bolder;
    font-size: 1vh;
  }
  .demopage1 ul li span:nth-child(3){
    width: 32%;
    /*height: 10%;*/
    display: inline-block;
    border: 1px solid transparent;
    font-weight: bolder;
    font-size: 1vh;
  }
  .demopage1 ul li:nth-child(1) span:nth-child(3) a,.demopage1 ul li:nth-child(2) span:nth-child(3) a,.demopage1 ul li:nth-child(3) span:nth-child(3) a{
    color:#F6B509;
  }
  .demopage1 ul li:nth-child(4) span:nth-child(3) a,.demopage1 ul li:nth-child(5) span:nth-child(3) a,.demopage1 ul li:nth-child(6) span:nth-child(3) a,.demopage1 ul li:nth-child(7) span:nth-child(3) a,.demopage1 ul li:nth-child(8) span:nth-child(3) a{
    color: white;
  }
  .demopage1 ul li span:nth-child(4){
    width: 20%;
    /*height: 10%;*/
    display: inline-block;
    border: 1px solid transparent;
    font-size: 1vh;
    color: white;
  }
  .demopage1 ul li span:nth-child(5){
    width: 12%;
    /*height: 10%;*/
    display: inline-block;
    border: 1px solid transparent;
    font-size: 1vh;
    color: white;
    border-radius: 7%;
    font-weight: bolder;
    background-color: #F9B709;
    cursor:pointer
  }
  .demopage1 ul li span:nth-child(6){
    width: 12%;
    /*height: 10%;*/
    display: inline-block;
    border: 1px solid transparent;
    font-size: 1vh;
    color: white;
    font-weight: bolder;
    background-color: #1BAEF8;
    cursor:pointer
  }
  .gd{
    width: 20%;
    /*height: 5%;*/
    text-align: center;
    left: 80%;
    top:91%;
    position: absolute;
    border: 1px solid transparent;

  }
  .gd a{
    color: white;
    font-weight: bolder;
  }

  /*———————————————图形三—————————————————————*/
  #Graphical_3{
    width: 66.8%;
    height: 20.8%;
    border: 1px solid transparent;
    position: absolute;
    bottom: 2.4%;
    left: 0.9%;
  }
  .Graphical_3_1{
    width: 73%;
    height: 100%;
    border: 1px solid transparent;
  }
  .Graphical_3_1_1{
    width: 96%;
    height: 90%;
    margin-left: 4%;
    border: 1px solid #000;
  }
  .Graphical_3_2{
    width: 26%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    border: 1px solid transparent;
  }
  .Graphical_3_2>div{
    width: 67%;
    height: 20%;
    margin: 2% auto;
    border: 1px solid transparent;
    position: relative;
    background-color: #02122c;
    border-radius: 4px;
    opacity: 0.6;

  }
  .Graphical_3_2>div>.a_imgs{
    width: 13%;
    height: 70%;
    position: absolute;
    left:5%;
    top: 12%;
    border: 1px solid transparent;
  }

  .Graphical_3_2>div>p{
    width:70%;
    height: 88%;
    position: absolute;
    /*border: 1px solid #000;*/
    right: 0;
    padding-right: 5%;
    /*text-align: center;*/
    padding-top: 1.8%;
  }

  .Graphical_3_2>div>p span:nth-child(1){
    font-size: 1.6vh;
    color: white;
    font-weight: bolder;
  }
  .Graphical_3_2>div>p span:nth-child(2){
    width: 29%;
    /*height: 100%;*/
    text-align: center;
    display: inline-block;
    /*border: 1px solid #000;*/
    font-size: 2.4vh;

    font-weight: bolder;
  }
  .Graphical_3_2>div>p span:nth-child(3){
    font-size: 1.6vh;
    color: white;
    font-weight: bolder;
  }
  .a_imgs_a{
    background-image:url("../imgs/t1.png"  );
    background-size:100% 100%;
  }
  .a_imgs_b{
    background-image:url("../imgs/t2.png"  );
    background-size:100% 100%;
  }
  .a_imgs_c{
    background-image:url("../imgs/t3.png"  );
    background-size:100% 100%;
  }
  .a_imgs_d{
    background-image:url("../imgs/t4.png"  );
    background-size:100% 100%;
  }
  .ys_a{
    color: dodgerblue;
  }
  .ys_b{
    color: #FE6B7D;
  }
  .ys_c{
    color: #F9B709;
  }
  .ys_d{
    color: #00FFF0;
  }




  /*————————————————图形四————————————————————*/
  #Graphical_4{
    width: 29.5%;
    height: 21.4%;
    border: 1px solid transparent;
    position: absolute;
    top: 11.5%;
    right: 0.9%;
  }
  .Graphical_4_1{
    width: 100%;
    height: 100%;
    /*position: absolute;*/
    border: 1px solid transparent;
  }
  /*—————————————————图形五———————————————————*/
  #Graphical_5{
    width: 29.5%;
    height: 34.1%;
    border: 1px solid transparent;
    position: absolute;
    top: 37.6%;
    right: 0.9%;
  }
  .Graphical_5_1{
    width: 100%;
    height: 90%;
    position: absolute;
    border: 1px solid transparent;
  }
  /*———————————————————图形六—————————————————*/
  #Graphical_6{
    width: 29.5%;
    height: 20.8%;
    border: 1px solid transparent;
    position: absolute;
    bottom: 2.4%;
    right: 0.85%;
  }
  .Graphical_6_1{
    width: 100%;
    height: 99%;
    /*position: absolute;*/
    border: 1px solid transparent;
    z-index: 1;
  }
  .Graphical_6_2{
    width: 39%;
    height: 100%;
    border: 1px solid transparent;
    position: absolute;
    top: 0;
    left: 31%;
    background-image:url("../imgs/dq.png");
    background-size:100% 100%;
  }
  /*———————————————————图形七—————————————————*/
  #Graphical_7{
    width: 40%;
    height: 43.7%;
    border: 1px solid transparent;
    position: absolute;
    left: 29%;
    top:28%;
  }
  .Graphical_7_1{
    width: 100%;
    height: 100%;
    border: 1px solid transparent;
  }
  .Graphical_7_2{
    width: 26%;
    height: 8%;
    position: absolute;
    top: 1%;
    left: 1%;
    border: 1px solid transparent;
    color: white;
    font-weight: bolder;
    text-align: center;
    font-size: 1.5vh;
  }
  .Graphical_7_2 select {
    width: 40%;
    height: 100%;
    /*padding: 2% 2%;*/
    padding-top: 1%;
    padding-bottom: 2%;
    margin: 0;
    text-align-last: center;
    border: 0.2em ridge #115A81;
    background-color: #052D51;
    color: white;
    outline: none;
    box-shadow: none;
  }

  /*———————————————————图形八—————————————————*/
  #Graphical_8{
    width: 36.4%;
    height: 7.8%;
    border: 1px solid transparent;
    position: absolute;
    left: 30.9%;
    top:12.5%;
  }
  #Graphical_8 .Graphical_8_1 {
    width: 46.3%;
    height: 100%;
    border: 1px solid transparent;
    /*z-index: 1;*/
  }

  #Graphical_8 .Graphical_8_1 div span{
    width: 8.7%;
    height: 100%;
    text-align: center;
    line-height: 150%;
    font-size: 5vh;
    position: absolute;
    /*border: 1px solid red;*/
    color: #F5E925;
    z-index: 0;
  }
  #Graphical_8 .Graphical_8_1 div:nth-child(1) span{

  }
  #Graphical_8 .Graphical_8_1 div:nth-child(2) span{
    margin-left: 8.9%;
  }
  #Graphical_8 .Graphical_8_1 div:nth-child(3) span{
    margin-left: 18.5%;
  }
  #Graphical_8 .Graphical_8_1 div:nth-child(4) span{
    margin-left: 28%;
  }
  #Graphical_8 .Graphical_8_1 div:nth-child(5) span{
    margin-left: 37.7%;
  }
  #Graphical_8 .Graphical_8_2 {
    width: 46.3%;
    height: 100%;
    position:absolute;
    right: 0;
    top: 0;
    /*border: 1px solid #000;*/

  }
  #Graphical_8 .Graphical_8_2 div span{
    width: 18.7%;
    height: 100%;
    text-align: center;
    line-height: 150%;
    font-size: 5vh;
    position: absolute;
    /*border: 1px solid transparent;*/
    color: #72E96B;
  }
  #Graphical_8 .Graphical_8_2 div:nth-child(1) span{

  }
  #Graphical_8 .Graphical_8_2 div:nth-child(2) span{
    margin-left: 19.9%;
  }
  #Graphical_8 .Graphical_8_2 div:nth-child(3) span{
    margin-left: 40.5%;
  }
  #Graphical_8 .Graphical_8_2 div:nth-child(4) span{
    margin-left: 61%;
  }
  #Graphical_8 .Graphical_8_2 div:nth-child(5) span{
    margin-left: 81.7%;
  }












</style>
